<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title>SmartHome.py - Example</title>
        <link rel="stylesheet" href="/css/jquery.mobile.min.css" />
        <link rel="stylesheet" href="/css/my.css" />
        <script src="/js/jquery.min.js"></script>
        <script src="/js/jquery.mobile.min.js"></script>
        <script src="/js/jquery.flot.min.js"></script>
        <script src="/js/jquery.flot.time.min.js"></script>
        <script src="/js/smarthome.min.js"></script>
        <script src="/js/my.smarthome.js"></script>
    </head>
<body>

<div data-role="page" id="html" data-dom-cache="true">

    <div data-role="header">
        <h3>Basic HTML Elements</h3>
    </div> <!-- /header -->

    <div data-role="content">
        <h2>Text elements</h2>
        <div data-role="fieldcontain">
            <div data-sh="example.div" id="example_div">Div: Enter content here...</div>
            <span data-sh="example.span" id="example_span">Span: Enter content here...</span>
        </div>
        <h2>Image element</h2>
        <div data-role="fieldcontain">
            <img data-sh="example.img" style="width: 100px; height: 100px" src="/img/example.png" />
            <p>A string item which could be set with sh.example.img("/new/path.png")</p>
            <p>You could specify a visu_img attribute to map a postive integer value to an image.<br />list for the item.</p>
<pre>
# smarthome.conf
['example']
    [['img']]
        value = True
        type = num # or bool for a switch
        visu = true
        visu_img = /img/off.png, /img/on.png

# yourlogic.py
sh.example.img(1) # or sh.example.img(True) would change the displayed image to /img/on.png
</pre>
        </div>
        <h2>Interactive Images</h2>
        <h3>Switch/Push</h3>
        <div data-role="fieldcontain">
            <p><img data-sh="example.switch" class="switch" style="width: 100px; height: 100px" src="/img/example.png" />&nbsp;<img data-sh="example.switch" class="push" style="width: 100px; height: 100px" src="/img/example.png" /></p>
            <p>The switch class provides a basic switch. Depending on the current value it will send 'True' or 'False'. For visual feedback you would like to specify 'visu_img' as in the example above.<br />
            The push class is similar to the switch, but it sends 'True' if you push the button and 'False' if you release it.</p>
        </div>
        <h3>Set</h3>
        <div data-role="fieldcontain">
            <p><img data-sh="example.set" class="set" style="width: 100px; height: 100px" value="22" src="/img/example.png" /> <img data-sh="example.set" class="set" style="width: 100px; height: 100px" value="77" src="/img/example.png" /> Value of example.set = <span data-sh="example.set"></span></p>
            <p>This button sets the value of the item to the specified value. Currently only numeric (integer and float) values are supported!</p>
        </div>
        <h2>RRD Graphs</h2>
        <div data-role="fieldcontain">
            <div data-rrd="example.rrd" data-frame="1h" style="margin:1%;width:device-width;height:300px"></div>
            <p>Print a graph for the item with the specified timeframe. For the frame you could choose beetwen 'h' = hour, 'd' = day, 'm' = month and 'y' = year.</p>
            <p>You could specify options as described at the <a href="https://github.com/flot/flot/blob/master/API.md">flot homepage</a> in the 'data-options' attribute:
            <p>Simply place multiple items into one graph:</p>
            <div data-rrd="example.rrd|example.rrd2" data-frame="12h" style="margin:1%;width:device-width;height:300px"></div>
        </div>
        <h2>Lists</h2>
        <div data-role="fieldcontain">
            <ul data-sh="example.list" data-filter="true" data-role="listview" data-inset="true"></ul>
            <p>It fills an unsorted list ul with the elements specified in the item array.</p>
        </div>
        <h2>Logs</h2>
        <div data-role="fieldcontain">
            <ul data-log="SmartHome.py" data-max="5" data-filter="true" data-role="listview" data-inset="true"></ul>
            <p>Shows the the entries of the log file for the number of data-max.</p>
        </div>
    </div> <!-- /content -->

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li><a href="/example.html#html">HTML</a></li>
                <li><a href="/example.html#trigger">Logic Trigger</a></li>
                <li><a href="/example.html#form">Form</a></li>
                <li><a href="/gen/" data-ajax="false">Generated</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="trigger">

    <div data-role="header">
        <h3>Trigger logics</h3>
    </div> <!-- /header -->

    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="sh_example_button">Button trigger</label>
            <a data-logic="dialog" data-role="button" value="Test 1" href="">call logic 'dialog' with 'Test 1'</a>
            <a data-logic="dialog" data-role="button" value="Test 2" href="">call logic 'dialog' with 'Test 2'</a>
        </div>
        <div data-role="fieldcontain">
            <label for="sh_example_trigger_img">Image trigger</label>
            <img data-logic="dialog" style="width: 80px; height: 80px;" value="Test 3" src="/img/example.png" />
        </div>
    </div> <!-- /content -->

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li><a href="/example.html#html">HTML</a></li>
                <li><a href="/example.html#trigger">Logic Trigger</a></li>
                <li><a href="/example.html#form">Form</a></li>
                <li><a href="/gen/" data-ajax="false">Generated</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="form">

    <div data-role="header">
        <h3>Form Elements</h3>
    </div> <!-- /header -->

    <div data-role="content">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <label for="sh_example_text">Text</label>
                <input data-sh="example.text" id="sh_example_text" placeholder="" value="" type="text" />
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <label for="sh_example_textarea">Text Area</label>
                <textarea data-sh="example.textarea" id="sh_example_textarea" placeholder=""></textarea>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <label for="sh_example_toggle">Toggle</label>
                <select data-sh="example.toggle" id="sh_example_toggle" data-theme="" data-role="slider">
                    <option value="off">Aus</option>
                    <option value="on">An</option>
                </select>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <label for="sh_example_slider">Slider</label>
            <input type="range" data-sh="example.slider" id="sh_example_slider" value="0" min="0" max="100" step="5" />
        </div>
        <div data-role="fieldcontain">
            <label for="sh_example_select">Select</label>
            <select data-sh="example.select" id="sh_example_select">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>Radio</legend>
                <input data-sh="example.radio" name="example_radio" id="radio1" value="1" type="radio" />
                <label for="radio1">Option 1</label>
                <input data-sh="example.radio" name="example_radio" id="radio2" value="2" type="radio" />
                <label for="radio2">Option 2</label>
                <input data-sh="example.radio" name="example_radio" id="radio3" value="3" type="radio" />
                <label for="radio3">Option 3</label>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>Checkbox</legend>
                <input data-sh="example.checkbox" id="checkbox" type="checkbox" />
                <label for="checkbox">Checkbox 1</label>
                <input data-sh="example.checkbox2" id="checkbox2" type="checkbox" />
                <label for="checkbox2">Checkbox 2</label>
            </fieldset>
        </div>

    </div> <!-- /content -->

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li><a href="/example.html#html">HTML</a></li>
                <li><a href="/example.html#trigger">Logic Trigger</a></li>
                <li><a href="/example.html#form">Form</a></li>
                <li><a href="/gen/" data-ajax="false">Generated</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>
